<template>
    <div id="bigBox">
        <div class="background">
            <img src="../../assets/Loginbackground.jpg" width="100%" height="100%" />
        </div>
        <h1>欢迎使用潇湘大药房</h1>
        <form>

            <div class="inputBox">
                <div class="inputText">
                    <!-- span没有固定的格式表现。当对它应用样式时，它会产生视觉上的变化。 -->
                    <i class="fa fa-address-book" aria-hidden="true"></i>
                    <input type="text" placeholder="请输入用户名" v-model="username"/>
                </div>
                <div class="inputText">
                    <i class="fa fa-lock" aria-hidden="true"></i>
                    <input type="password" placeholder="请输入密码" v-model="password"/>
                </div>
                <div class="inputText">
                    <i class="fa fa-unlock-alt" aria-hidden="true"></i>
                    <input type="password" placeholder="请确认密码"  v-model="password1" />
                </div>
                <input type="button" v-on:click="Register" class="inputButton" value="注册"/>
                <input type="reset" class="inputButton" value="重置"/>
            </div>

        </form>
    </div>
</template>

<script>
    export default {
        name: "Register",
        data(){
            return{
                name: '',
                username: '',
                password: '',
                password1: ''
            }
        },
        mounted() {

        },
        methods: {
            Register(){
                var that = this
               if(this.username !=null &&this.password == this.password1) {
                    console.log(this.username)
                    this.$axios.post("http://localhost:8088/xiaoxiang/addloginuser", {
                        userName: this.username,
                        password: this.password
                    }).then(function (res) {
                        console.log(res.data.data)
                        if(res.data.code === 500){
                            alert("用户名已存在，请重新输入")
                        }else if (res.data.msg === "增加用户成功") {
                            console.log("用户注册成功")
                            that.$router.push("/Logins/Login")
                        } else {
                            console.log("用户注册失败")
                            // window.location.href = 'fail.html'
                        }
                    })
                }
                else{
                    if (that.username==null){
                        console.log(this.userName)
                        alert("用户名不能为空")
                    }else if(that.password != that.password1){
                        alert("两次密码不一样")
                    }
                }

            }

        }
    }
</script>

<style src="../../config/font-awesome-4.7.0/css/font-awesome.css"></style>
<style scoped>
    #bigBox .background {
        width: 100%;
        height: 100%;
        /**宽高100%是为了图片铺满屏幕 */
        z-index: -1;
        position: fixed;
        top: 0px;
        /*这里是设置与顶部的距离*/
        left: 0px;
        /*这里是设置与左边的距离*/
        bottom: 0px;
        right: 0px;
    }
    #bigBox {
        margin: 0 auto;
        margin-top: 150px;
        /* 	上内边距和下内边距是 20px
            右内边距和左内边距是 50px */
        padding: 20px 50px;
        background-color: #00000090;
        width: 400px;
        height: 350px;
        /* border-radius这个属性算是非常常用的属性之一了，
        通过设置元素的border-radius值，可以轻松给元素设置圆角边框，
        甚至实现绘制圆、半圆、四分之一的圆等各种圆角图形。 */

        /* 常用来给button加圆角边框，或者画一个圆形按钮，仅需设置一个数值，
        即可给元素的四个边角设置统一的圆角弧度,根据px的大小来改变 */
        border-radius: 10px;
        text-align: center;
    }

    #bigBox h1 {
        color: white;
    }

    #bigBox .inputBox {
        margin-top: 50px;
    }

    #bigBox .inputBox .inputText {
        margin-top: 20px;
    }

    #bigBox .inputBox .inputText input {
        /* 边框 */
        border: 0;
        padding: 10px 10px;
        /* 设置下边框大小为1px,实线,颜色为白色. */
        border-bottom: 1px solid white;
        background-color: #00000000;
        color: white;
    }


    #bigBox .inputBox .inputText i {
        color: white;
    }

    #bigBox .inputBox .inputButton {
        border: 0;
        width: 150px;
        height: 20px;
        color: white;
        margin-top: 30px;
        border-radius: 20px;
        /* 用了颜色轻柔 */
        background-image: linear-gradient(120deg, #a6c0fe 0%, #f68084 100%);
    }


</style>